<template>
  <a-row :gutter="[16, 16]" class="my-5">
    <!-- 一级 -->
    <a-col :span="6">
      <div class="h-full flex justify-center items-center">
        <a-button class="leftButton mr-1" @click="handleButtonClick(props.rowItem.id)"
          >{{ props.rowItem.authName }}<CloseOutlined /></a-button
        ><CaretRightOutlined />
      </div>
    </a-col>
    <!-- 二级 -->
    <a-col :span="18" v-if="props.rowItem.children.length">
      <a-col v-for="item in props.rowItem.children" :key="item.id">
        <div class="h-full my-4 flex justify-left items-center flex-wrap">
          <div class="mr-50">
            <a-button class="middleButton mr-1" @click="handleButtonClick(item.id)"
              >{{ item.authName }}<CloseOutlined /></a-button
            ><CaretRightOutlined />
          </div>
          <!-- 三级 -->
          <div class="basis-200">
            <div class="m-2 inline-block" v-for="thirdItem in item.children" :key="thirdItem.id">
              <a-button class="rightButton" @click="handleButtonClick(thirdItem.id)"
                >{{ thirdItem.authName }}<CloseOutlined
              /></a-button>
            </div>
          </div>
        </div>
      </a-col>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
  import { CloseOutlined, CaretRightOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-vue';
  import { useShopRoleStore } from '/@/store/modules/shopRoleStore';

  const props = defineProps({
    rowId: {
      type: Number,
      require: true,
      default() {
        return 0;
      },
    },
    rowItem: {
      type: Object,
      require: true,
      default() {
        return {};
      },
    },
  });

  const emits = defineEmits(['updateRoleAuth']);

  const shopRoleStore = useShopRoleStore();

  const handleButtonClick = async (id: number) => {
    const params = {
      roleId: props.rowId,
      rightId: id,
    };
    const data = await shopRoleStore.deleteRoleAuth(params);
    message.success('删除成功');
    emits('updateRoleAuth', [props.rowId, data]);
  };
</script>

<style lang="less" scoped>
  .leftButton {
    border-color: rgba(0, 132, 244);
    background-color: rgba(0, 132, 244, 0.1);
  }
  .middleButton {
    border-color: rgba(0, 150, 136);
    background-color: rgba(0, 150, 136, 0.1);
    &:hover,
    &:focus {
      color: rgba(0, 150, 136);
      background-color: transparent;
      border-color: rgba(0, 150, 136);
    }
  }
  .rightButton {
    border-color: rgba(255, 152, 0);
    background-color: rgba(255, 152, 0, 0.1);
    &:hover,
    &:focus {
      color: rgba(255, 152, 0);
      background-color: transparent;
      border-color: rgba(255, 152, 0);
    }
  }
</style>
